<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 400px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid lavender;
    }
    .main .top{
        width: 400px;
        height: 100px;
        background-color: royalblue;
        text-align: center;
    }
    .main .top >span{
        font-family: 微软雅黑;
        font-size: 40px;
        color: white;
        line-height: 100px;
    }
    .main .center{
        width: 400px;
        height: 400px;
        text-align: center;
        background-color: cornflowerblue;
    }
    .main .center .kaika{
        padding-top: 50px;
    }
    .main .center .kaika,.jieshu,.huanshu,.tsrk{
        width: 400px;
        height: 80px;
        line-height: 80px;
        font-family: 微软雅黑;
        font-size: 30px;
    }
    .main .center .kaika a{
       text-decoration: none;
        color: white;
    }
    .main .center .jieshu a{
        text-decoration: none;
        color: white;
    }
    .main .center .huanshu a{
        text-decoration: none;
        color: white;
    }
    .main .center .tsrk a{
        text-decoration: none;
        color: white;
    }
</style>
<body>

<div class="main">
    <div class="top">
        <span>图书管理系统</span>
    </div>
    <div class="center">
        <div class="kaika">
            <a href="addCrad.html">开卡模式 </a>
        </div>
        <div class="jieshu">
            <a href="jieshu.html">借书模式</a>
        </div>
        <div class="huanshu">
            <a href="huanshu.html">还书模式</a>
        </div>
        <div class="tsrk">
            <a href="addBook.html">添加图书</a>
        </div>
    </div>
</div>
</body>
</html>